<script lang="ts" setup>
import type { Advantage01Item } from '@/api/designer/model'
import type { Advantage01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore, useInstStore } from '@/stores'
import { getDesignerThemeColorLight } from '@/utils/helper'
import { computed } from 'vue'
import './RenderAdvantage01.less'

type RenderedItems = Array<{
  row: number
  cols: Array<Advantage01Item>
}>
defineOptions({
  name: 'RenderAdvantage01',
})
const props = defineProps<{
  render: Advantage01ComponentMeta
}>()
const instStore = useInstStore()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
const mainStyle = computed(() => {
  if (platform.value === 'mobile') {
    return {
      '--advantage01-border-color': getDesignerThemeColorLight(instStore.detail!.themeColor!, 0.2),
    }
  }
  return {}
})
const renderedItems = computed<RenderedItems>(() => {
  const result: RenderedItems = []
  if (platform.value === 'mobile') 
    return result
  const items = props.render.config.items || []
  const count = items.length
  if (count <= 4) {
    result.push({
      row: 1,
      cols: items,
    })
  }
  else if (count <= 6) {
    result.push({
      row: 1,
      cols: items.slice(0, 3),
    }, {
      row: 2,
      cols: items.slice(3),
    })
  }
  else {
    result.push({
      row: 1,
      cols: items.slice(0, 4),
    }, {
      row: 2,
      cols: items.slice(4),
    })
  }
  return result
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('main')" :style="mainStyle">
      <div :class="prefix('bgbox')" />
      <div :class="prefix('content')">
        <div :class="prefix('items')">
          <!-- item for loop -->
          <div v-for="item of render.config.items" :key="item.id" :class="prefix('item')">
            <div
              :class="prefix('icon-wrap')"
              :style="{ borderColor: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
            >
              <i
                class="iconfont" :class="[item.icon, prefix('icon')]"
                :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
              />
            </div>
            <!-- 标题居中显示  最多显示2行16个字符 -->
            <div :class="prefix('title')">
              {{ item.title.slice(0, 16) }}
            </div>
            <!-- 描述内容行数不限 -->
            <div :class="prefix('desc')">
              {{ item.description }}
            </div>
            <!-- 底部线条 -->
            <div :class="prefix('line-bottom')" />
            <!-- 右侧线条 -->
            <div :class="prefix('line-right')" />
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="platform === 'pc'" :class="prefix('main')">
      <div :class="prefix('bgbox')" />
      <div :class="[prefix('content'), prefix(`content-${render.config.items?.length}`)]">
        <div :class="prefix('items-wrap')">
          <!-- row for loop -->
          <div v-for="row of renderedItems" :key="row.row" :class="prefix('items')">
            <!-- item for loop -->
            <div v-for="item of row.cols" :key="item.id" :class="prefix('item')">
              <div
                :class="prefix('icon-wrap')"
                :style="{ borderColor: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
              >
                <i
                  class="iconfont" :class="[item.icon, prefix('icon')]"
                  :style="{ color: item.iconUseThemeColor ? instStore.detail?.themeColor : item.iconColor }"
                />
              </div>
              <!-- 标题居中显示  最多显示2行16个字符 -->
              <div :class="prefix('title')">
                {{ item.title.slice(0, 16) }}
              </div>
              <!-- 描述内容行数不限 -->
              <div :class="prefix('desc')">
                {{ item.description }}
              </div>
              <!-- 底部线条 -->
              <div :class="prefix('line-bottom')" />
              <!-- 右侧线条 -->
              <div :class="prefix('line-right')" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
